<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框（Modal）插件</title>
   <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery2.1.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>


    <style>

        * {
            margin: 0;
            padding: 0;
        }

        .tbl {
            height: 60px;              /*不会作用于  thead 和 tfoot 中的单元格  */
            width: 800px;
            border: 1px solid red;       /*边框默认是 不可见的*/
            margin: 0px auto;          /*表格距离上边距20  水平居中*/
            font-size: 16px;
            text-align: left;         /*表格文本水平居中*/
            border-collapse: collapse;  /*边框合并并取消重叠       此属性会导致 cellpadding="110" cellspacing="110" 两个属性失效    */
        }

        td {
            border:1px solid red;
            padding: 5px;
        }

        th{

            height: 40px;
            text-align: left;
            border:1px solid red;
            padding-left: 5px;
        }



        input {
            margin-left: 5px;

            width: 100%;
            height: 100%;
            /*这两个去除input输入框的边框 */
            border: none;
            outline: medium;
        }

        input:focus {

            width: 100%;
            height: 100%;

            border: none;
            outline: medium;
        }


        textarea {
            font-size: 16px;
            width: 100%;

            resize: vertical;         /*只能上下拖动   resize  缩放属性*/

            border: none;
            outline: medium;
        }


    </style>
</head>
<body>


<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#tuPianYuLan">
    开始演示模态框
</button>



<!-- 图片预览模态框（Modal） -->
<div class="modal fade" id="tuPianYuLan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog"  style="width: 1200px;" >
        <div class="modal-content" >
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>

                <h4 class="modal-title" id="myModalLabel">
                   风机维护记录
                </h4>

            </div>
            <div class="modal-body">

                <table class="tbl" cellpadding="110" cellspacing="110">
                    <caption style="margin-bottom: 5px;text-align: center">表格标题</caption>
                    <thead>
                    <tr>
                        <th>序号</th>       <!--th 表头会自动水平居中     td需要设置-->
                        <th>风机编号</th>
                        <th>所在位置</th>
                        <th>通风百叶、风阀情况</th>   <!--表格的宽度和内容的长度有关系  内容太多会撑开 表格自动加宽超过设置的1500px-->
                        <th>螺栓紧固、外壳清洁</th>
                        <th>点动测试</th>
                        <th>绝缘测试(10%抽检)</th>
                        <th >情况说明</th>
                        <th>维保人</th>
                        <th>维保时间</th>
                        <th>操作</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td colspan="11" style="text-align: center">添加一行数据</td>

                    </tr>

                    <tr>
                        <td>1</td>
                        <td><input  /></td>
                        <td><input  /></td>
                        <td>
                            <select    style="vertical-align: top;font-size: 15px"  id="sel1">
                                <option value="2">&radic;</option>
                                <option value="1">&frasl;</option>
                                <option value="0">&times;</option>
                            </select>
                        </td>
                        <td>
                            <select    style="vertical-align: top;font-size: 15px">
                                <option value="2">&radic;</option>
                                <option value="1">&frasl;</option>
                                <option value="0">&times;</option>
                            </select>
                        </td>
                        <td>
                            <select    style="vertical-align: top;font-size: 15px">
                                <option value="1">&nbsp;&nbsp;&radic;正常</option>
                                <option value="0">&nbsp;&nbsp;&times;异常</option>
                                <option value="2">&nbsp;&nbsp;&frasl;未进行</option>

                            </select>
                        </td>
                        <td>
                            <select    style="vertical-align: top;font-size: 15px">
                                <option value="1">合格</option>
                                <option value="0">不合格</option>

                            </select>
                        </td>
                        <td></td>
                        <td><input  /></td>
                        <td><input  /></td>
                        <td><button>删除</button></td>

                    </tr>




                   <!-- <tr>
                        <td>情况说明</td>
                        <td colspan="7" ><textarea rows="3" placeholder="请输入"></textarea></td>

                    </tr>
                    <tr>
                        <td colspan="8" style="height: 20px"></td>


                    </tr>
                    <tr>
                        <td>维保人</td>
                        <td colspan="2"><input  /></td>


                    </tr>-->

                   <!-- <tr>
                        <td>张飞</td>
                        <td>
                            <select  id="sel"  style="vertical-align: top;font-size: 15px">
                                <option value="1">对</option>
                                <option value="0">&times;</option>
                            </select>
                        </td>
                        <td>男</td>
                        <td>健身</td>
                    </tr>
                    <tr>
                        <td>王五</td>
                        <td>20</td>
                        <td> <textarea rows="3">&nbsp;&nbsp;</textarea></td>
                        <td>健身</td>
                    </tr>
                    <tr>
                        <td><input  /></td>
                        <td colspan="3">列合并</td>

                    </tr>-->
                    </tbody>

                <!--    <tfoot>
                    <tr>
                        <td colspan="10" ><textarea rows="3" style="text-align: left" >
                            填表要求：
                            1、维保人员按照规定周期每半年对风机进行维护保养。

                        </textarea></td>
                    </tr>
                    </tfoot>-->

                </table>

                <div>
                    填表要求：
                    1、维保人员按照规定周期每半年对风机进行维护保养。
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="fun()">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>




<script>

    function fun(){
        console.log($('#sel1').val())
    }



</script>

</body>
</html>